import React from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx'
import { Browser, BrowserHrm } from 'weaver-mobile-page'
import { Tools, Select, DatePicker } from 'weaver-mobile'
import { withRouter } from 'react-router-dom';
import { TextareaItem, Icon, List } from 'weaver-mobile';
import QueueAnim from 'rc-queue-anim';

const FormItem = List.FormItem
const { DatePickerInput } = DatePicker
const getLabel = Tools.getLabel

@inject("taskMainAdvancedSearchStore", "taskMainStore")
@withRouter
@observer
class TaskMainAdvancedSearch extends React.Component {

    constructor(props) {
        super(props)
        this.state = { ...props }
    }

    componentWillMount() {
        this.initValues()
    }

    componentWillUnmount() {

    }

    initValues = () => {
    }

    onResetBtnClick = () => {
        const { advancedParams } = this.props.taskMainStore
        advancedParams.taskname = ""
        advancedParams.principal = []
        advancedParams.urgentLevel = ""
        advancedParams.begindate = ""
        advancedParams.begindate1 = ""
        advancedParams.enddate = ""
        advancedParams.enddate1 = ""
        advancedParams.orderby = ""
        advancedParams.orderbytype = ""
        advancedParams.tagArray = [],
        advancedParams.subordinate = []
    }

    onSearchBtnClick = () => {
        const { advancedParams, changeAdvancedParams } = this.props.taskMainStore

        changeAdvancedParams({ ...advancedParams })
        this.props.history.go(-1)
    }

    render() {
        const { condtype, advancedParams } = this.props.taskMainStore
        const { taskMainHrmPrincipalBrowserStore, taskMainHrmSubordinateBrowserStore, taskMainTagBrowserStore,
            urgentLevelOptions, orderbyFieldOptions, orderbyTypeOptions } = this.props.taskMainAdvancedSearchStore

        return (
            <QueueAnim>
                <div key="workrelate-mobile-task-advanced-search" className="workrelate-mobile-task-advanced-search">
                    <div className="search-content">
                        <List>
                            <FormItem
                                extra={<Icon type="editor" size="xxs" />}
                                label={getLabel(1352, '任务名称')}
                                line
                                noBorder
                                content={
                                    <TextareaItem
                                        value={advancedParams.taskname}
                                        placeholder={getLabel(83869, '请输入')}
                                        autoHeight
                                        onChange={v => advancedParams.taskname = v}
                                    />
                                }
                            />
                        </List>

                        <List>
                            <BrowserHrm
                                label={getLabel(16936, '责任人')}
                                store={taskMainHrmPrincipalBrowserStore}
                                hasAdvanceSerach
                                type={1}
                                isSingle={true}
                                onChange={(...arg) => {
                                    advancedParams.principal = arg[2].length > 0 ? [{ id: arg[2][0].id, name: arg[2][0].name }] : []
                                }}
                                valueArray={advancedParams.principal}
                            />
                        </List>

                        <List>
                            <FormItem
                                noBorder
                                line
                                content={
                                    <Select
                                        className="common-select"
                                        label={getLabel(15534, '紧急程度')}
                                        value={advancedParams.urgentLevel}
                                        options={urgentLevelOptions}
                                        onChange={(key, showname) => {
                                            advancedParams.urgentLevel = key
                                        }}
                                    />
                                }
                            />
                        </List>

                        <List className="border-none">
                            <FormItem
                                label={getLabel(740,'开始日期')}
                                noBorder
                                line
                                content={
                                    <DatePickerInput
                                        placeholder={getLabel(83869, '请输入')}
                                        mode={"date"}
                                        value={advancedParams.begindate}
                                        onChange={(val) => advancedParams.begindate = val}
                                    />
                                }
                            />
                        </List>
                        <List>
                            <FormItem
                                label="&nbsp;"
                                noBorder
                                line
                                content={
                                    <DatePickerInput
                                        placeholder={getLabel(83869, '请输入')}
                                        mode={"date"}
                                        value={advancedParams.begindate1}
                                        onChange={(val1) => advancedParams.begindate1 = val1}
                                    />
                                }
                            />
                        </List>

                        <List className="border-none">
                            <FormItem
                                label={getLabel(741, '结束日期')}
                                noBorder
                                line
                                content={
                                    <DatePickerInput
                                        placeholder={getLabel(83869, '请输入')}
                                        mode={"date"}
                                        value={advancedParams.enddate}
                                        onChange={(val) => advancedParams.enddate = val}
                                    />
                                }
                            />
                        </List>
                        <List>
                            <FormItem
                                label="&nbsp;"
                                noBorder
                                line
                                content={
                                    <DatePickerInput
                                        placeholder={getLabel(83869, '请输入')}
                                        mode={"date"}
                                        value={advancedParams.enddate1}
                                        onChange={(val1) => advancedParams.enddate1 = val1}
                                    />
                                }
                            />
                        </List>

                        <List className="border-none">
                            <FormItem
                                noBorder
                                line
                                content={
                                    <Select
                                        className="common-select orderby-field-select"
                                        label={getLabel(129216, '排序方式')}
                                        value={advancedParams.orderby}
                                        options={orderbyFieldOptions}
                                        onChange={(key, showname) => {
                                            advancedParams.orderby = key
                                        }}
                                    />
                                }
                            />
                        </List>
                        <List>
                            <FormItem
                                noBorder
                                line
                                content={
                                    <Select
                                        className="common-select"
                                        label={getLabel(149, '默认')}
                                        value={advancedParams.orderbytype}
                                        options={orderbyTypeOptions}
                                        onChange={(key, showname) => {
                                            advancedParams.orderbytype = key
                                        }}
                                    />
                                }
                            />
                        </List>

                        <List>
                            <Browser
                                store={taskMainTagBrowserStore}
                                label={getLabel(30878, '任务标签')}
                                isSingle={true}
                                type={"wrltag"}
                                onChange={(...arg) => {
                                    advancedParams.tagArray = toJS(arg[2])
                                }}
                                valueArray={advancedParams.tagArray}
                                viewAttr={2}
                            />
                        </List>

                        {
                            (condtype == "" || condtype == "0") &&
                            <List>
                                <BrowserHrm
                                    label={getLabel(15089, '我的下属')}
                                    store={taskMainHrmSubordinateBrowserStore}
                                    hasAdvanceSerach
                                    type={1}
                                    isSingle={true}
                                    // tabs={[
                                    //     {
                                    //         key: "1",
                                    //         name: "最近",
                                    //         selected: false,
                                    //         dataParams: { cmd: "List" }
                                    //     },
                                    //     {
                                    //         key: "3",
                                    //         name: getLabel(15089, '我的下属'),
                                    //         selected: false
                                    //     }
                                    // ]}
                                    onChange={(...arg) => {
                                        advancedParams.subordinate = arg[2].length > 0 ? [{ id: arg[2][0].id, name: arg[2][0].name }] : []
                                    }}
                                    valueArray={advancedParams.subordinate}
                                />
                            </List>
                        }
                    </div>

                    <div className="operation-btn-wrapper">
                        <span className="reset" onClick={this.onResetBtnClick}>{getLabel(2022, '重置')}</span>
                        <span className="search" onClick={this.onSearchBtnClick}>{getLabel(197, '搜索')}</span>
                    </div>
                </div>
            </QueueAnim>
        )
    }
}

export default TaskMainAdvancedSearch
